<template>
    <Popup class="tech-modal" v-model="value" :close-on-click-overlay="false" :overlay="overlay" :get-container="container">
        <div v-if="isTitle" class="modal-title">
            <div class="title-name">{{title}}</div>
            <MiniIcon v-if="isClose" class="tech-popup-close-icon" name="close" :mode="mode" theme="#7D7D83" :styleMode="styleMode" is-stop @click="close" />
        </div>
        <div class="modal-content">
            <slot></slot>
        </div>
        <slot name="extra"></slot>
    </Popup>
</template>

<script>
import { Popup } from 'vant';
import MiniIcon from './MiniIcon';
import ModeMixin from '@common/mixin';
export default {
    name: 'TechModal',
    mixins: [ModeMixin],
    components: {
        Popup,
        MiniIcon,
    },
    props: {
        value: Boolean,
        title: {
            type: String,
            default: 'Modal',
        },
        isClose: {
            type: Boolean,
            default: true,
        },
        isTitle: {
            type: Boolean,
            default: true,
        },
        overlay: {
            type: Boolean,
            default: true,
        },
        container: String,
    },
    model:{
        prop: 'value',
    },
    methods: {
        close() {
            this.$emit('close');
        },
    },
};
</script>

<style lang="less">
    .tech-modal {
        width: 90%;
        background-color: @white;
        border-radius: @border-radius;
        .modal-title {
            height: 50px;
            border-bottom: @border;
            // font-weight: @font-weight-bold;
            .flex-column-center();
            .title-name {
                .font-size-md();
                font-weight: @font-weight-bold;
            }
            .mini-icon {
                position: absolute;
                right: @gap-md;
            }
        }
        .modal-content {
            padding: @gap-md;
        }
    }
</style>

